<template>
    <el-dialog v-model="dialogData.visible" :title="dialogData.title" center width="70%" top="10vh" :close-on-click-modal="false">
        <div class="dialog-content">
            <div class="flex justify-between items-start w-full mb-3">
                <el-form :inline="true" :model="searchform" style="width:100%">
                    <el-form-item label="时间范围：">
                        <el-radio-group v-model="searchform.rangeType">
                            <el-radio-button label="全部" :value="0"/>
                            <el-radio-button label="本周" :value="1"/>
                            <el-radio-button label="本月" :value="2"/>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="赛制：">
                        <el-select v-model="searchform.pointsRuleId" placeholder="请选择" style="width:200px">
                            <el-option v-for="item in pointsRuleSList" :key="item.id" :label="item.label" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="success" :icon="Search" @click="getMatchRecordListByUserId">查询</el-button>
                        <el-button :icon="Refresh" @click="handlerReset">重置</el-button>
                    </el-form-item>
                </el-form>

                <el-button type="primary" :icon="Plus" @click="openDialog('add')">新增</el-button>
            </div>
            <el-table border :data="tableData.list">
                <el-table-column prop="time" label="比赛时间" align="center"/>
                <el-table-column prop="location" label="比赛地点" align="center"/>
                <el-table-column prop="userInfo" label="红方用户" align="center">
                    <template #default="scope">
                        <el-tag type="danger">{{ scope.row.userInfo.nickname }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="opponentInfo" label="蓝方用户" align="center">
                    <template #default="scope">
                        <el-tag type="primary">{{ scope.row.opponentInfo.nickname }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="ruleId" label="赛制" align="center">
                    <template #default="scope">
                        <span type="warning">{{ scope.row.ruleInfo?.label }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="scoreResult" label="比分" align="center">
                    <template #default="scope">
                        <template v-if="scope.row.scoreResult">
                            <el-tag type="danger">{{ scope.row.scoreResult.a }}</el-tag>
                            :
                            <el-tag type="primary">{{ scope.row.scoreResult.b }}</el-tag>
                        </template>
                    </template>
                </el-table-column>
                <el-table-column prop="createdAt" label="创建时间" align="center"/>
                <el-table-column label="操作" fixed="right" align="center">
                    <template #default="scope">
                        <!--                        <el-tooltip content="编辑" placement="top">-->
                        <!--                            <el-button type="primary" :icon="Edit" circle plain @click="openDialog('update',scope.row)"/>-->
                        <!--                        </el-tooltip>-->
                        <el-tooltip content="查看" placement="top">
                            <el-button type="primary" :icon="View" circle plain @click="openDialog('details',scope.row)"/>
                        </el-tooltip>

<!--                        <el-tooltip content="删除" placement="top">-->
<!--                            <el-button type="danger" :icon="Delete" circle plain/>-->
<!--                        </el-tooltip>-->
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </el-dialog>

    <dialog-match-record-add-edit ref="dialogMatchRecordAddEditRef" @update="getMatchRecordListByUserId"></dialog-match-record-add-edit>
    <dialog-match-record-details ref="dialogMatchRecordDetailsRef"></dialog-match-record-details>


</template>


<script setup>
import { reactive, ref, useTemplateRef } from 'vue'
import { Delete, Edit, View, Plus, Refresh, Search } from '@element-plus/icons-vue'
import matchRecordApi from '@/api/model/match-record.js'
import pointsRuleSApi from '@/api/model/points-rule-s.js'
import { dayjs, ElMessage, ElMessageBox } from 'element-plus'
import dialogMatchRecordAddEdit from '../platform-match-record/dialog-add-edit.vue'
import dialogMatchRecordDetails from '../platform-match-record/dialog-details.vue'

const emits = defineEmits(['update'])
defineExpose({ openDialog })
const dialogRef = useTemplateRef('dialogRef')
const dialogMatchRecordAddEditRef = useTemplateRef('dialogMatchRecordAddEditRef')
const dialogMatchRecordDetailsRef = useTemplateRef('dialogMatchRecordDetailsRef')

const dialogData = reactive({
    visible: false,
    title: '',
    userId: '',
})

const searchform = reactive({
    rangeType: 0,
    pointsRuleId: ''
})

/**
 * 表格相关字段
 */
const tableData = reactive({
    list: [],
})

/**
 * 重置操作
 */
function handlerReset () {
    searchform.rangeType = 0
    searchform.pointsRuleId = ''
    getMatchRecordListByUserId()
}

/**
 * 打开弹框
 * @param type
 * @param item
 */


function openDialog (type, item) {
    if (type === 'match-record') {
        dialogData.title = '用户比赛记录'
        dialogData.visible = true
        dialogData.userId = item.id
        getMatchRecordListByUserId()
    } else if (type === 'add' || type === 'update') {
        dialogMatchRecordAddEditRef.value.openDialog(type, item)
    } else if (type === 'details') {
        dialogMatchRecordDetailsRef.value.openDialog(type, item)
    }
}

/**
 *  获取用户的比赛记录列表
 */
async function getMatchRecordListByUserId () {
    const rangeTypeMap = {
        0: {
            startTime: '',
            endTime: ''
        },
        1: {
            startTime: dayjs().startOf('week').format('YYYY-MM-DD'),
            endTime: dayjs().endOf('week').format('YYYY-MM-DD')
        },
        2: {
            startTime: dayjs().startOf('month').format('YYYY-MM-DD'),
            endTime: dayjs().endOf('month').format('YYYY-MM-DD')
        }
    }
    const { code, data = [] } = await matchRecordApi.getMatchRecordByUser.get({
        userId: dialogData.userId,
        startTime: rangeTypeMap[searchform.rangeType].startTime,
        endTime: rangeTypeMap[searchform.rangeType].endTime,
        pointsRuleId: searchform.pointsRuleId
    })
    if (code === 200) {
        tableData.list = data
    } else {
        tableData.list = []
    }
}

/**
 *  获取赛制列表
 */
const pointsRuleSList = ref([])
const getPointsRuleSList = async () => {
    const { code, data } = await pointsRuleSApi.list.get()
    if (code === 200) {
        pointsRuleSList.value = data
    } else {
        pointsRuleSList.value = []
    }
}
getPointsRuleSList()

</script>
